<!DOCTYPE html>
<html lang="en">
<?php
session_start();

?>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../style/scss/PostDetails.css">
</head>
<style>
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  .header {

    position: sticky;
    height: 70px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    top: 0px;
    background-color: #fff;
    box-shadow: #ccc 0px 5px 20px 0px;

    &>.logo {
      list-style: none;
      width: 200px;

      & .logo {
        width: 200px;
      }
    }

    &>.options {
      display: flex;
      list-style: none;

      & li {
        margin-right: 20px;
        padding: 10px;
        border-radius: 5px;
        font-size: 20px;
        color: #0327b3;
        cursor: pointer;

        &:hover {
          color: #fff;
          background-color: #2A4DD0;
        }

        &>a {
          color: inherit;
          text-decoration: none;
        }
      }
    }

    &>.login {
      width: 200px;
    }
  }

  .li-user {
    max-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* 新增，作为绝对定位参照 */

    &>.image-box {
      display: flex;
      justify-content: center;
      align-items: center;

      &>.user-image {
        max-width: 70px;
        max-height: 30px;
      }
    }

    &>.username {
      margin: 0 5px;
      max-width: 100px;
      overflow-x: hidden;
      text-overflow: ellipsis;
    }
  }

  /* 退出登录按钮样式开始 */
  .logout {
    width: 100%;
    position: absolute;
    top: 0px;
  }

  .logout button {
    width: 100%;
    height: 50px;
    background: red;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.5s ease;
    display: none;
    margin-top: 0;
    /* 修改为0，去掉负margin */
    float: none;
    /* 去掉float */
  }

  .logout button a {
    text-decoration: none;
    color: #fff;
    font-size: 16px;
  }

  .li-user:hover .logout button {
    width: 100%;
    display: inline-block;
    /* 改为inline-block更合适 */
  }

  /* 退出登录按钮样式结束 */
</style>

<body>
  <div class="header">
    <ul class="logo">
      <li>
        <img src="../image/logo.png" alt="" class="logo">
      </li>
    </ul>
    <ul class="options">
      <li><a href="./">论坛首页</a></li>
      <li><a href="./list.php">板块</a></li>
      <li><a href="./me.php">我的信息</a></li>
      <li class="li-user">
        <div class='image-box'>
          <img src="<?php
          if (isset($_SESSION['head'])) {
            echo '../image/head/' . $_SESSION['head'];
          } else {
            echo '../image/head/Default1.jpg';
          }
          ?>" alt="user" class='user-image' onerror='this.onerror=null; this.src="../image/head/Default.jpg";'>
        </div>
        <?php
        if (isset($_SESSION['username'])) {
          echo "<a>" . $_SESSION['username'] . "</a>";
          echo <<<EOF
                    <div class="logout">
                    <button><a onclick="confirm('确认退出登录吗？')?href='../control/doLogin.php?action=logout':''">退出登录</a></button>
                </div>
EOF;
        } else {
          echo "<a href='login.php'>登录</a>";
        }
        ?>

      </li>
    </ul>

  </div>
  <div class="article-detail-container">
    <?php
    require '../model/topicDao.php';
    $userId=isset($_SESSION['userid'])?$_SESSION['userid']:-1;
    $myHead = isset($_SESSION['head'])?$_SESSION['head']:null;
    $topicId = $_GET['topic_id'];
    $data = get_topics($topicId);
    $uid=$data['uId'];
    $boardName = $data['boardName'];
    $title = $data['title'];
    $content = $data['content'];
    $username = $data['uName'];
    $head = $data['head'];
    $time = $data['publishTime'];
    $likes = $data['likes'];
    $replyNumber = $data['replyNumber'];
    $topicNumber=$data['topicNumber'];
    echo <<<EOF
  <div class="content-layout">
      <!-- 左侧内容区 -->
      <div class="main-content">
        <!-- 帖子内容 -->
        <div class="article-content">
          <!-- 帖子标题 -->
          <div class="article-header-info">
            <h1 class="article-title">$title</h1>
            <div class="article-meta">
              <div class="author-info">
                <img src="../image/head/$head" class="author-avatar" onerror='this.onerror=null; this.src="../image/head/Default.jpg";'/>
                <div class="author-details">
                  <div class="author-name">$username</div>
                  <div class="publish-time">$time</div>
                </div>
              </div>
              <div class="article-actions">
                <button class="action-btn" :class="{ active: isLiked }" onclick="clickLike($userId,$topicId)">
                  <svg t="1747792497347" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="947" width="18" height="18">
                    <path
                      d="M832 364.8h-147.2s19.2-64 32-179.2c6.4-57.6-38.4-115.2-102.4-121.6h-12.8c-51.2 0-83.2 32-102.4 76.8l-38.4 96c-32 64-57.6 102.4-76.8 115.2-25.6 12.8-121.6 12.8-128 12.8H128c-38.4 0-64 25.6-64 57.6v480c0 32 25.6 57.6 64 57.6h646.4c96 0 121.6-64 134.4-153.6l51.2-307.2c6.4-70.4-6.4-134.4-128-134.4z m-576 537.6H128V422.4h128v480z m640-409.6l-51.2 307.2c-12.8 57.6-12.8 102.4-76.8 102.4H320V422.4c44.8 0 70.4-6.4 89.6-19.2 32-12.8 64-64 108.8-147.2 25.6-64 38.4-96 44.8-102.4 6.4-19.2 19.2-32 44.8-32h6.4c32 0 44.8 32 44.8 51.2-12.8 102.4-32 166.4-32 166.4l-25.6 83.2h243.2c19.2 0 32 0 44.8 12.8 12.8 12.8 6.4 38.4 6.4 57.6z"
                      p-id="948" fill="#2c2c2c"></path>
                  </svg>
                  <span>$likes</span>
                </button>
                <button class="action-btn" @click="focusComment">
                  <svg t="1747793891273" class="icon" viewBox="0 0 1114 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="1009" width="22" height="22">
                    <path
                      d="M412.43236215 880.21486555h-7.85199339c-19.62998309-3.92599633-35.33396983-15.70398675-43.18596322-31.40797352l-27.48197645-66.74194336h-62.81594705c-70.66793969 0-129.55789039-58.88994998-129.55788966-129.55789038V271.68538194c0-74.59393674 58.88994998-129.55789039 129.55788966-129.55789039h526.08355351c70.66793969 0 129.55789039 54.96395365 129.55789039 129.55789039v380.82167634c0 70.66793969-58.88994998 129.55789039-129.55789039 129.55789039h-282.6717602l-58.88994997 78.51993306c-7.85199338 11.77798971-23.55598013 19.62998309-43.18596323 19.62998381z m-141.33588011-679.19742403c-39.25996689 0-70.66793969 31.40797353-70.66793967 70.66794042v380.82167635c0 39.25996689 31.40797353 70.66793969 70.66793967 70.66794039h102.07591322l39.25996689 94.22391984 70.66794042-94.22391984h310.15373665c39.25996689 0 70.66793969-31.40797353 70.66793969-70.66794039V271.68538194c0-39.25996689-31.40797353-70.66793969-70.66793969-70.66794042H271.09648204zM346.41018531 337.51125953h374.80181521a30.71001833 30.71001833 0 0 1 0 61.4418473H346.41018531a30.71001833 30.71001833 0 1 1 0-61.4418473z m0.23992193 202.23245021h190.06186059a30.97175162 30.97175162 0 1 1 0 61.89988056H346.67191787a30.97175162 30.97175162 0 1 1 0-61.89988056z"
                      fill="#2c2c2c" p-id="1010"></path>
                  </svg>
                  <span>$replyNumber</span>
                </button>
              </div>
            </div>
          </div>
          <!-- 帖子title -->
          <div class="article-tags">
            <span class="tag">#$boardName</span>
          </div>
          <!-- 帖子内容 -->
          <div class="article-body">
            <!-- <div class="article-image">
              <img src="article.image" />
            </div> -->
            <div class="article-text">
              $content
            </div>
          </div>
        </div>

        <!-- 评论区 -->
        <div class="comments-section">
          <div class="section-header">
            <h2 class="section-title">评论 ($replyNumber)</h2>
          </div>

          <!-- 评论输入框 -->
          <div class="comment-input">
          <img src="../image/head/$myHead" class="user-avatar" onerror='this.onerror=null; this.src="../image/head/Default.jpg";'/>
            <div class="input-wrapper">
              <textarea v-model="commentText" placeholder="写下你的评论..." rows="3"></textarea>
              <div class="input-actions">
                <button class="submit-btn" onclick="submitComment($userId,$topicId)" :disabled="!commentText.trim()">发表评论</button>
              </div>
            </div>
          </div>

          
EOF; ?>
    <?php
    $replys = get_reply($topicId);

    foreach ($replys as $reply) {
      $username1 = $reply['uName'];
      $content1 = $reply['content'];
      $time1 = $reply['publishTime'];
      $head1 = $reply['head'];
      echo <<<EOF
  <div class="comment-list">
            <div class="comment-item">
              <img src="../image/head/$head1" class="user-avatar" onerror='this.onerror=null; this.src="../image/head/Default.jpg";'/>
              <div class="comment-content">
                <div class="comment-header">
                  <div class="comment-author">$username1</div>
                  <div class="comment-time">$time1</div>
                </div>
                <div class="comment-text">$content1</div>
                
              </div>
            </div>
          </div>
EOF;
    }
    ?>
    <?php
    echo <<<EOF
<!-- 评论列表 -->
          
        </div>
      </div>

      <!-- 右侧边栏 -->
      <div class="sidebar">
        <!-- 作者信息 -->
        <div class="sidebar-card author-card">
          <div class="author-profile" onclick="window.location.href='./me.php?userId=$uid'">
            <img src="../image/head/$head" class="author-avatar-large" />
            <div class="author-info">
              <div class="author-name">$username</div>
              <div class="author-title">走进美食的世界</div>
            </div>
            <button class='follow-btn'>
              关注
            </button>
          </div>
          <div class="author-stats">
            <div class="stat-item">
              <div class="stat-value">$topicNumber</div>
              <div class="stat-label">帖子</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">168</div>
              <div class="stat-label">关注者</div>
            </div>
          </div>
        </div>

        <!-- 相关帖子 -->
        <div class="sidebar-card">
          <h3 class="card-title">相关帖子</h3>
          <div class="related-articles">
            <div class="related-article">
              <div class="related-title">手机真能变成长焦相机？</div>
              <div class="related-meta">
                <span class="related-author">影视飓风</span>
                <span class="related-views">26 阅读</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
EOF;
    ?>



  </div>
</body>
<script>
  let liked=false;
  let comment_text = document.querySelector('.comment-input textarea');
  //评论
  function submitComment(userId,topicId){
    console.log(userId,topicId);
    if(userId==-1){
      alert('请先登录');
      window.location.href='../views/login.php';
      return;
    }
    let comment = comment_text.value;
    if(comment.trim() === ''){
      return;
    }
    let data={
      userId:userId,
      topicId:topicId,
      content:comment.trim()
    }
    let requestBody=new URLSearchParams(data); // 将 data 转换为表单格式
    fetch('../control/doReply.php',{
      method: 'POST',
      headers:{
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      body: requestBody.toString()
    }).then(res=>{
      return res;
    }).then(data=>{
      console.log(data);
      if(data.ok){
        window.location.reload();
      }
    })
  }
  //点赞
  function clickLike(userId,topicId){
    if(userId==-1){
      alert('请先登录');
      window.location.href='../views/login.php';
      return;
    }
    if(liked){
      return;
    }
    fetch('../control/doLike.php',{
      method: 'POST',
      headers:{
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      body: `topicId=${topicId}`
    }).then(res=>{
      return res;
    }).then(data=>{
      console.log(data);
      document.querySelector('.action-btn').style.backgroundColor='#ff5722';
      document.querySelector('.action-btn').style.color='white';
      document.querySelector('.action-btn svg').style.color='white';
      document.querySelector('.action-btn span').textContent=+document.querySelector('.action-btn span').textContent+1;
    })
    liked=true;
  }
</script>

</html>